<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  name: { type: String, required: true }, // 图标文件名
  color: { type: String, default: '#333' }, // 颜色
  size: { type: String, default: '24px' }, // 尺寸
  prefix: { type: String, default: 'icon' } // 前缀（需与 symbolId 配置匹配）
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
const svgClass = computed(() => `svg-icon ${props.name}`);
</script>

<template>
  <svg :class="svgClass" :style="{ width: size, height: size }" aria-hidden="true">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<style scoped >
.svg-icon {
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}
</style>
